<template>
    <!-- 组件结构 -->
    <div class="demo">
        <h1>{{msg}}</h1>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>
        <h2>学生年龄：{{myAge}}</h2>
        <button @click="updateAge">点击修改年龄</button>
    </div>
</template>
<script>
    // 组件交互相关代码（数据、方法等等）
    //简写形式
    export default {
        name: 'Student',
        data(){
            return {
                msg:"学生信息",
                myAge: this.age
            }
        },
        methods:{
            updateAge(){
                this.myAge ++
            }
        },
        // props:['name','sex','age']//简单接收

        //接收的同时对数据类型进行限制
        // props:{
        //     name: String,
        //     sex:String,
        //     age:Number
        // }

        //接收的同时对数据：进行类型限制+默认值的指定+必要性限制
        props:{
            name:{
                type: String,//name的类型是字符串
                require: true //name是必要的
            },
            age:{
                type: Number,
                default: 99 //默认值
            },
            sex:{
                type: String,//name的类型是字符串
                require: true //name是必要的
            },
        }

    }
</script>
